<template xmlns="http://www.w3.org/1999/html">
  <div class="main">
    <div class="title">
      <a class="no-line" href="/login">登录</a>
      <span>·</span>
      <a class="active no-line" href="/register">注册</a>
    </div>

    <div class="sign-up-container">
      <el-form :model="member" status-icon :rules="rules" ref="memberForm">
        <el-form-item prop="name">
          <el-input v-model="member.name"
                    placeholder="用户名"
                    clearable
          >
            <svg-icon slot="prefix" icon-class="user-smile" class="ml5"/>
          </el-input>
        </el-form-item>
        <el-form-item prop="password">
          <el-input type="password"
                    v-model="member.password"
                    placeholder="密码"
                    clearable
          >
            <svg-icon slot="prefix" icon-class="lock" class="ml5"/>
          </el-input>
        </el-form-item>
        <el-form-item prop="checkPass">
          <el-input type="password"
                    v-model="member.checkPass"
                    placeholder="确认密码"
          >
            <svg-icon slot="prefix" icon-class="lock" class="ml5"/>
          </el-input>
        </el-form-item>
        <el-form-item prop="phone">
          <el-input v-model="member.phone"
                    placeholder="手机号"
                    clearable
          >
            <svg-icon slot="prefix" icon-class="smartphone" class="ml5"/>
          </el-input>
        </el-form-item>
        <el-form-item prop="email">
          <el-input v-model="member.email"
                    placeholder="邮箱"
                    clearable
                    @keyup.enter.native="submitForm()"
          >
            <svg-icon slot="prefix" icon-class="email" class="ml5"/>
          </el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="submitForm()" style="width: 100%">注册</el-button>
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>

<script>
import '~/assets/css/sign.css'
import '~/assets/css/iconfont.css'
import registerApi from '~/api/register'

export default {
  layout: 'sign',
  data() {
    const validatePass = (rule, value, callback) => {
      if (value === '') {
        callback(new Error('请输入密码'))
      } else {
        if (this.member.checkPass !== '') {
          this.$refs.memberForm.validateField('checkPass')
        }
        callback()
      }
    }
    const validatePass2 = (rule, value, callback) => {
      if (value === '') {
        callback(new Error('请再次输入密码'))
      } else if (value !== this.member.password) {
        callback(new Error('两次输入密码不一致'))
      } else {
        callback()
      }
    }
    const validatePhone = (rule, value, callback) => {
      if (value === '') {
        callback(new Error('请输入手机号'))
      } else {
        if (!/^1[3456789]\d{9}$/.test(value)) {
          callback(new Error('请输入正确的手机号'))
        } else {
          callback()
        }
      }
    }
    const validateEmail = (rule, value, callback) => {
      const mailReg = /^([a-zA-Z0-9_-])+@([a-zA-Z0-9_-])+(.[a-zA-Z0-9_-])+/
      if (!value) {
        return callback(new Error('请输入邮箱'))
      }
      setTimeout(() => {
        if (mailReg.test(value)) {
          callback()
        } else {
          callback(new Error('请输入正确的邮箱'))
        }
      }, 100)
    }

    return {
      member: {
        name: '',
        password: '',
        checkPass: '',
        phone: '',
        email: ''
      },
      rules: {
        name: [{ required: true, message: '请输入用户名', trigger: 'blur' }],
        password: [{ validator: validatePass, trigger: 'blur' }],
        checkPass: [{ validator: validatePass2, trigger: 'blur' }],
        phone: [{ validator: validatePhone, trigger: 'blur' }],
        email: [{ validator: validateEmail, trigger: 'blur' }]
      }
    }
  },
  methods: {
    submitForm() {
      this.$refs.memberForm.validate((valid) => {
        if (valid) {
          this.submitRegister()
        } else {
          this.$message.warning('请完成必填项')
          return false
        }
      })
    },
    // 注册
    submitRegister() {
      registerApi.register(this.member).then(response => {
        // 提示注册成功
        this.$message.success(response.message)
        this.$router.push({ path: 'login' })
      })
    }
  }
}
</script>
